<!--
 * @Author: your name
 * @Date: 2021-08-31 19:44:13
 * @LastEditTime: 2021-09-01 08:38:12
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \经纪人\broker-page\app\src\views\index\index.vue
-->
<template>
  <div class="home">
    <div class="user">
      <p>宏烨经纪人</p>
      <div class="b">
        <img
          src="https://img2.baidu.com/it/u=1904969466,1233178529&fm=253&fmt=auto&app=120&f=JPEG?w=506&h=500"
          alt=""
        />
        <p>王小明</p>
      </div>
    </div>
    <div class="list">
      <router-link to="/xinfang">
        <p>{{ newhouselength }}</p>
        <p>新房</p>
      </router-link>
      <router-link to="/ershoufang">
        <p>{{ oldhouselength }}</p>
        <p>二手房</p>
      </router-link>
      <router-link to="/chuzhufang">
        <p>{{ renthouselength }}</p>
        <p>出租</p>
      </router-link>
    </div>
    <nav>
      <router-link to="/message">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiaoxi"></use>
        </svg>
        <!-- <i class="iconfont icon-xiaoxi"></i> -->
        <!-- <img src="../../font/.png" alt=""> -->
        <span>消息</span>
      </router-link>
      <router-link to="/qiuzhu">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fangzi1"></use>
        </svg>
        <!-- <i class="iconfont icon-fangzi1"></i> -->
        <!-- <img src="../../font/.png" alt=""> -->
        <span>求租</span>
      </router-link>
      <router-link to="/qiugou">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fangzi1"></use>
        </svg>
        <!-- <i class="iconfont icon-fangzi1"></i> -->
        <!-- <img src="../../font/fangzi_1.png" alt=""> -->
        <span>求购</span>
      </router-link>
      <router-link to="/loushiquan">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xingxing"></use>
        </svg>
        <!-- <i class="iconfont icon-xingxing"></i> -->
        <!-- <img src="../../font/.png" alt=""> -->
        <span>楼市圈</span>
      </router-link>
      <router-link to="/zhibo">
        <svg class="icon" aria-hidden="true">
          <use
            xlink:href="#icon-zhibobofangshexiangjiguankanmianxing-copy"
          ></use>
        </svg>
        <!-- <i class="iconfont icon-zhibobofangshexiangjiguankanmianxing-copy"></i> -->
        <!-- <img src="../../font/.png" alt=""> -->
        <span>直播</span>
      </router-link>
      <router-link to="/tuangou">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fangzi1"></use>
        </svg>
        <!-- <i class="iconfont icon-fangzi1"></i> -->
        <!-- <img src="../../font/fangzi_1.png" alt=""> -->
        <span>团购</span>
      </router-link>
      <router-link to="/paihangbang">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fangzi1"></use>
        </svg>
        <!-- <i class="iconfont icon-fangzi1"></i> -->
        <!-- <img src="../../font/fangzi_1.png" alt=""> -->
        <span>排行榜</span>
      </router-link>
      <router-link to="/index/zhanji">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-chuizi"></use>
        </svg>
        <!-- <i class="iconfont icon-chuizi"></i> -->
        <!-- <img src="../..//font/.png" alt=""> -->
        <span>战绩</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newhouselength: 188,
      oldhouselength: 188,
      renthouselength: 188,
    };
  },
  created() {
    // this.newhouselength=sessionStorage.getItem("newhouse"),
    // this.oldhouselength=sessionStorage.getItem("oldhouse"),
    // this.renthouselength=sessionStorage.getItem("renthouse")
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
.user {
  width: 100%;
  height: 250px;
  background: #1381f4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  > p {
    width: 100%;
    height: 50px;
    line-height: 40px;
    padding: 0 10px;
    color: #fff;
    font-size: 20px;
  }
  .b {
    width: 100%;
    flex: 1;
    text-align: center;
    img {
      display: inline-block;
      width: 90px;
      height: 90px;
      border: 3px solid #fff;
      border-radius: 50%;
      margin: 10px 0;
    }
    p {
      color: #fff;
      font-size: 18px;
    }
  }
}

.list {
  width: 95%;
  height: 100px;
  border: 1px solid #ccc;
  background: #fff;
  margin: 0 auto;
  margin-top: -50px;
  border-radius: 15px;
  display: flex;
  a {
    width: 33%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 15px 0;
    p:first-of-type {
      color: #1381f4;
      font-size: 24px;
    }
    p:nth-of-type(2) {
      color: #666;
    }
  }
}

nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  a {
    width: 33%;
    text-align: center;
    margin-top: 30px;
    span {
      display: block;
    }
  }
}
</style>
